<script setup lang="ts" name="IconifyIcon">
  import { Icon } from "@iconify/vue";
  import type { CSSProperties } from "vue";

  interface IconifyProps {
    size?: string | number; // 用来控制 width 和 height
    name: string; // 图标名称
    color?: string; // 图标颜色
    iconStyle?: CSSProperties; // 其他样式
  }

  const props = withDefaults(defineProps<IconifyProps>(), {
    size: 26, // 默认大小
  });

  // 合并 size 和 iconStyle
  const computedIconStyle = {
    width: `${props.size}px`,
    height: `${props.size}px`,
    ...props.iconStyle, // 允许其他样式覆盖
  };
</script>

<template>
  <Icon :icon="props.name" :color="props.color" :style="computedIconStyle" />
</template>

<style>
  svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
